<template>
  <div class="medical-nursing-table">
    <b>非手术患者Padua血栓风险评估单</b>

    <div v-if="showPreview" class="preview-modal" @click="showPreview = false">
      <img src="@/assets/9.jpg" class="preview-image" />
    </div>
    <img src="@/assets/8.jpg" @click="openPreview" alt="" class="btn-icon" />
    <table class="full-table">
      <!-- 表头 -->
      <thead>
        <tr>
          <th>项目</th>
          <th>内容</th>
          <th v-for="(date, index) in dateColumns" :key="'date-' + index">
            {{ formatDate(date) }}
          </th>
        </tr>
      </thead>

      <!-- 表格主体 -->
      <tbody>
        <!-- 动态生成分类行 -->
        <template v-for="category in categories">
          <tr v-for="(item, idx) in category.items" :key="`${category.id}-${idx}`">
            <!-- 分类名称（只在第一行显示） -->
            <td v-if="idx === 0" :rowspan="category.items.length">{{ category.name }}</td>
            <!-- 项目内容 -->
            <td>{{ item.name }}</td>
            <!-- 日期列数据 -->
            <td
              v-for="(date, dateIdx) in dateColumns"
              :key="`${category.id}-${idx}-${dateIdx}`"
            >
              <span v-if="isItemChecked(category.id, item.name, date)">√</span>
            </td>
          </tr>
        </template>

        <!-- 备注行 -->
        <tr>
          <td colspan="2">备注</td>
          <td v-for="(date, index) in dateColumns" :key="'note-' + index">
            {{ getNoteForDate(date) }}
          </td>
        </tr>
        <tr>
          <td colspan="2">护理措施</td>
          <td v-for="(measure, index) in nursingMeasures" :key="'measure-' + index">
            {{ measure.msg }}
          </td>
        </tr>

        <!-- 总分行 -->
        <tr>
          <td colspan="2">总分</td>
          <td v-for="(date, index) in dateColumns" :key="'score-' + index">
            {{ getScoreForDate(date) }}
          </td>
        </tr>

        <!-- 护士签名行 -->
        <tr>
          <td colspan="2">护士签名</td>
          <td v-for="(date, index) in dateColumns" :key="'signature-' + index">
            {{ getSignatureForDate(date) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { reactive, toRefs,onMounted, defineComponent } from 'vue'

export default defineComponent({
  name: 'PaduaTable',
  props: {
    // 可配置的分类数据
    categoriesConfig: {
      type: Array,
      default: () => [
        {
          id: 'i-catheter',
          name: 'I类导管',
          items: [
            { name: '胸管' },
            { name: 'T管' },
            { name: '口鼻插管' },
            { name: '静脉插管' },
            { name: '脑室引流管' },
            { name: '关节腔引流' },
            { name: '其他：' },
          ],
        },
        {
          id: 'ii-catheter',
          name: 'II类导管',
          items: [
            { name: '双套管' },
            { name: '深静脉置管' },
            { name: '三腔管' },
            { name: '造瘘管' },
            { name: '负压管' },
            { name: '其他：' },
          ],
        },
        {
          id: 'iii-catheter',
          name: 'III类导管',
          items: [
            { name: '导尿管' },
            { name: '胃管' },
            { name: '输液管' },
            { name: '吸氧管' },
            { name: '其他：' },
          ],
        },
        {
          id: 'consciousness',
          name: '意识',
          items: [
            { name: '清醒' },
            { name: '轻度烦躁' },
            { name: '意识不清' },
            { name: '中度烦躁' },
            { name: '重度烦躁' },
          ],
        },
        {
          id: 'others',
          name: '其他',
          items: [{ name: '幼儿' }, { name: '呃逆' }, { name: '呛咳' }],
        },
      ],
    },
  },

  setup(props) {
    const state = reactive({
      showPreview: false,
      // 从props中获取分类配置
      categories: props.categoriesConfig,

      // 动态数据
      dateColumns: [], // 日期列数据
      records: [], // 所有记录数据
      notes: [], // 备注数据
      nursingMeasures: [
        { msg: '妥善固定各管道，躁动病人给以适当的约束(肢体约束情况)' },
        { msg: '1' },
        { msg: '班班交接管道的位置、刻度' },
      ], // 护理措施
      scores: [], // 分数数据
      signatures: [], // 签名数据
    })
    const openPreview = () => {
      state.showPreview = true
    }
    // 模拟从接口获取数据
    const fetchTableData = async () => {
      // 这里应该是实际的API调用
      // 模拟数据，完全按照图片中的数据
      const mockData = {
        dates: ['2025-05-15T05:47:00', '2025-05-16T10:00:00', '2025-05-18T11:00:00'],
        records: [
          // I类导管
          {
            categoryId: 'i-catheter',
            itemName: '口鼻插管',
            date: '2025-05-15T05:47:00',
            checked: true,
          },
          {
            categoryId: 'i-catheter',
            itemName: '口鼻插管',
            date: '2025-05-18T11:00:00',
            checked: true,
          },

          // II类导管
          {
            categoryId: 'ii-catheter',
            itemName: '深静脉置管',
            date: '2025-05-15T05:47:00',
            checked: true,
          },
          {
            categoryId: 'ii-catheter',
            itemName: '深静脉置管',
            date: '2025-05-16T10:00:00',
            checked: true,
          },
          {
            categoryId: 'ii-catheter',
            itemName: '深静脉置管',
            date: '2025-05-18T11:00:00',
            checked: true,
          },

          // III类导管
          {
            categoryId: 'iii-catheter',
            itemName: '导尿管',
            date: '2025-05-15T05:47:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '导尿管',
            date: '2025-05-16T10:00:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '导尿管',
            date: '2025-05-18T11:00:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '胃管',
            date: '2025-05-15T05:47:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '胃管',
            date: '2025-05-16T10:00:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '胃管',
            date: '2025-05-18T11:00:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '输液管',
            date: '2025-05-15T05:47:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '输液管',
            date: '2025-05-16T10:00:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '输液管',
            date: '2025-05-18T11:00:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '吸氧管',
            date: '2025-05-15T05:47:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '吸氧管',
            date: '2025-05-16T10:00:00',
            checked: true,
          },
          {
            categoryId: 'iii-catheter',
            itemName: '吸氧管',
            date: '2025-05-18T11:00:00',
            checked: true,
          },

          // 意识
          {
            categoryId: 'consciousness',
            itemName: '清醒',
            date: '2025-05-16T10:00:00',
            checked: true,
          },
          {
            categoryId: 'consciousness',
            itemName: '清醒',
            date: '2025-05-18T11:00:00',
            checked: true,
          },
          {
            categoryId: 'consciousness',
            itemName: '意识不清',
            date: '2025-05-15T05:47:00',
            checked: true,
          },
        ],
        notes: [
          { date: '2025-05-15T05:47:00', text: '拔除经口气管插管' },
          { date: '2025-05-16T10:00:00', text: '置入口插管' },
        ],
        nursingMeasures: [
          { msg: '妥善固定各管道，躁动病人给以适当的约束(肢体约束情况)' },
          { msg: '1' },
          { msg: '班班交接管道的位置、刻度' },
        ],

        scores: [
          { date: '2025-05-15T05:47:00', score: 15 },
          { date: '2025-05-16T10:00:00', score: 10 },
          { date: '2025-05-18T11:00:00', score: 13 },
        ],
        signatures: [
          { date: '2025-05-15T05:47:00', name: '张护士' },
          { date: '2025-05-16T10:00:00', name: '李护士' },
          { date: '2025-05-18T11:00:00', name: '王护士' },
        ],
      }

      // 处理数据
      state.dateColumns = mockData.dates
      state.records = mockData.records
      state.notes = mockData.notes
      state.nursingMeasures = mockData.nursingMeasures
      state.scores = mockData.scores
      state.signatures = mockData.signatures
    }

    // 格式化日期显示
    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(
        date.getDate(),
      )} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`
    }

    const padZero = (num) => {
      return num < 10 ? `0${num}` : num
    }

    // 检查某项是否被勾选
    const isItemChecked = (categoryId, itemName, date) => {
      return state.records.some(
        (record) =>
          record.categoryId === categoryId &&
          record.itemName === itemName &&
          record.date === date &&
          record.checked,
      )
    }

    // 获取指定日期的备注
    const getNoteForDate = (date) => {
      const note = state.notes.find((n) => n.date === date)
      return note ? note.text : ''
    }

    // 获取指定日期的分数
    const getScoreForDate = (date) => {
      const score = state.scores.find((s) => s.date === date)
      return score ? score.score : ''
    }

    // 获取指定日期的签名
    const getSignatureForDate = (date) => {
      const signature = state.signatures.find((s) => s.date === date)
      return signature ? signature.name : ''
    }

    // 组件挂载时获取数据
    onMounted(() => {
      fetchTableData()
    })

    return {
  
        ...toRefs(state),
      openPreview,
      formatDate,
      isItemChecked,
      getNoteForDate,
      getScoreForDate,
      getSignatureForDate,
    }
  },
})
</script>

<style scoped lang="scss">
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.preview-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
.btn-icon {
  margin-right: 5px;
  width: 30px;
  vertical-align: sub;
  cursor: pointer;
  margin-left: 16px;
  vertical-align: middle;
}
.medical-nursing-table {
  width: 100%;
  font-family: Arial, sans-serif;

  margin: 20px 0;
}

.full-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

.full-table th,
.full-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

.full-table th {
  /* background-color: #f2f2f2; */
  font-weight: bold;
}
</style>
